<script>
import Layout from './components/Layout'
import SiteAside from './components/SiteAside'
import ToTop from './components/ToTop'
export default {
  components: {
    Layout: Layout,
    SiteAside: SiteAside,
    ToTop,
  }
}
</script>



<template>
  <div id="app">
    <div class="app-container">
      <Layout>

        <template #left>
          <div class="left">
            <SiteAside />
          </div>
        </template>

        <template #default>
          <div class="main">
            <RouterView />
          </div>
        </template>
      </Layout>
    </div>
    <div class="to-top">
      <ToTop />
    </div>
  </div>
</template>



<style lang='less' scoped>
@import './styles/mixin.less';

.app-container {
  .self-fill(fixed);
  width: 100%;
  height: 100%;

  .left,
  .right {
    flex: 0 0 auto;
    width: 250px;
    height: 100%;
  }

  .main {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
  }

}
</style>